<template>
	<gui-page :fullPage="true" :customHeader="customHeader" :isSwitchPage="isSwitchPage" class="gui-overflow-hidden"
		:customFooter="tabbar" iphoneXButtomStyle="background:#FFFFFF">
		<template v-slot:gStatusBar>
			<view style="height: 100%;width: 100%;" :style="{'background':base.qjcolor}"></view>
		</template>
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-align-items-center"
				:style="{'background':base.qjcolor}">
				<view v-if="showButtons" class="gui-flex gui-space-between gui-align-items-center gui-padding-small"
					style="width: 80rpx;background-color: #ffffff;border-radius: 30rpx;position: absolute; left: 10rpx;">
					<view @tap="navBack()" class="gui-icons" :style="{color:base.qjcolor}">&#xe643;</view>
					<view style="height: 20rpx;width: 1px;background-color: #ccc;"></view>
					<view @tap="goHome()" class="gui-icons" :style="{color:base.qjcolor}">&#xe63b;</view>
				</view>
				<!-- <gui-header-leading v-if="(tabbar==1 || !leading) ?false:true" @goHome="goHome"
                                     :home="home"></gui-header-leading> -->
				<text :class="{'gui-text-center':titleAlign=='center','gui-padding-x':titleAlign=='left'}"
					class="gui-h5 gui-blod gui-flex1  gui-ellipsis gui-primary-text">{{title}}</text>
				<view v-if="(tabbar!=1 && leading)" style="width:120rpx;"></view>
			</view>
		</template>

		<template v-slot:gFixedTop>
			<slot name="top"></slot>
		</template>

		<template v-slot:gBody>
			<slot name="body"></slot>
            <view v-if="$store.state.msgNum>0 && url !='/hyb_o2o/kefunew/list'" @click="toKF"
				style="position: fixed;bottom:20vh;right:20rpx;background-color: red;color: #fff;font-size: 24rpx;padding: 10rpx;"
				class="gui-flex gui-border-radius gui-align-items-center"><text
					class="helpTips gui-icons gui-block gui-color-white gui-text"
					style="font-size: 40rpx;">&#xe666;</text> <text
					style="margin-left: 10rpx;">{{$store.state.msgNum}}未读消息</text></view>
		</template>


		<template v-slot:gPendant>
			<slot name="pendant"></slot>
		</template>
		<!-- 底部导航菜单 -->
		<template v-slot:gFooter>
			<view v-if="menus.length > 1" :style="{'padding-top':midIndex>0?'50rpx;':''}" class="gui-relative"
				id="tabbar">
				<gui-flex direction="row" :wrap="false" alignItems="center" justifyContent="center"
					:customClass="['gui-footer']">
					<gui-flex class="gui-flex1" :customClass="['gui-flex1']" direction="column" alignItems="center"
						justifyContent="center" v-for="(menu,index) in menus" :key="index" @tap="navChange(index)">
						<gui-image v-if="index != midIndex || menu.tu_chu==0" :width="56" :height="56"
							:src="currentIndex==index?menu.thumb:menu.thumb2"></gui-image>
						<text v-if="index != midIndex || menu.tu_chu==0"
							:style="{'color':currentIndex == index?$store.state.base.qjcolor:'rgba(69, 90, 100, 0.6)'}"
							:class="[
                                  'gui-footer-icon-buttons-text',
                                  'gui-block'
                              ]">{{menu.title}}</text>
					</gui-flex>

					<gui-flex class="gui-flex1 gui-mid-bar" v-if="midIndex != -1 && menus[midIndex].tu_chu == 1"
						:customClass="['gui-mid-bar','gui-flex1']" direction="column" alignItems="center"
						justifyContent="center" @tap="navChange(midIndex)">
						<image style="width: 80rpx;height: 80rpx;border-radius: 50%;"
							:src="currentIndex==midIndex?menus[midIndex].thumb:menus[midIndex].thumb">
						</image>
						<text
							:class="[currentIndex == midIndex ? 'gui-primary-color' : 'gui-color-gray', 'gui-footer-icon-buttons-text','gui-block']">{{menus[midIndex].title}}</text>
					</gui-flex>

				</gui-flex>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "hyb-page",
		props: {
			leading: {
				type: Boolean,
				default: true
			},

			title: {
				type: String,
				default: ''
			},
			home: {
				type: Boolean,
				default: false
			},

			titleAlign: {
				type: String,
				default: "center"
			}
		},

		watch: {
			title(val) {
				if (val) {
					setTimeout(() => {
						uni.setNavigationBarTitle({
							title: val
						});
					}, 200);
				}
			}
		},

		data() {
			return {
				currentIndex: 0,
				showIndex: 1,
				tabbar: false,
				isSwitchPage: false,
				checked: false
			};
		},
		computed: {
			showButtons: function() {
				// 如果leading为true，强制显示按钮
				if (this.leading) {
					return true;
				}
				
				let show = true;
				this.menus.forEach((menu) => {
					if (menu.lianjie == this.url) {
						show = false;
					}
				});
				return show;
			},
			customHeader: () => {
				// #ifdef H5
				if (uni.$jswx.isWechat()) {
					return false;
				}
				// #endif
				return true;
			},

			url: function() {
				// #ifdef H5
				let url = this.$route.fullPath;
				//#endif

				// #ifdef MP
				let url = "/" + getCurrentPages()[getCurrentPages().length - 1]["route"];
				// #endif

				return url;
			},

			...mapState({
				base: state => state.base,
				menus: state => state.menus,
				midIndex: state => state.midIndex
			})

		},
		created() {
			// #ifdef MP
			uni.showShareMenu({
				menus: ["shareTimeline", "shareAppMessage"]
			});
			// #endif

			this.$nextTick(() => {
				// #ifdef H5
				let options = this.$route.query;
				// #endif

				// #ifdef MP
				let curPages = getCurrentPages();
				let options = curPages[curPages.length - 1].options;
				// #endif

				// #ifdef APP
				let curPages = getCurrentPages();
				let options = curPages[curPages.length - 1].$page.options;
				// #endif

				this.tabbar = options.tabbar == 1 ? true : false;
				if (this.tabbar) {
					this.isSwitchPage = true;
				}

				// 根据当前页面链接找到对应的菜单索引
				this.menus.forEach((menu, index) => {
					if (menu.lianjie === this.url.split('?')[0]) {
						this.currentIndex = index;
					}
				});
			});
		},

		methods: {
			navBack() {
				uni.navigateBack();
			},
			toKF() {
				let userinfo = uni.storage.get("userinfo");
            let url = "/hyb_o2o/kefunew/user_list?tag=yh";
				uni.redirectTo({
					url: url
				});
			},

			goHome() {
				this.navChange(0, true);
			},


			navChange: function(index, home) {
				this.currentIndex = index;
				let url = this.menus[index]["lianjie"];

				// 处理参数拼接逻辑
				let fullUrl = '';
				if (url.includes('?')) {
					// 如果URL中已经包含问号，则使用&连接新参数
					fullUrl = `${url}&tabinex=${index}&tabbar=1`;
				} else {
					// 如果URL中没有问号，则使用?添加第一个参数
					fullUrl = `${url}?tabinex=${index}&tabbar=1`;
				}

				if (home) {
					uni.reLaunch({
						url: fullUrl
					});
				} else {
					uni.redirectTo({
						url: fullUrl
					});
				}
			}
		}
	};
</script>
<style scoped>
	.menu-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.menu-icon {
		height: 40rpx;
		width: 40rpx;
	}

	.gui-mid-bar {
		position: absolute;
		bottom: 20rpx;
		z-index: 100;
	}

	.helpTips {
		animation-name: upAnimation;
		transform-origin: center bottom;
		animation-duration: 2s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-delay: .5s;
	}

	@keyframes upAnimation {
		0% {
			transform: rotate(0deg);
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		}

		10% {
			transform: rotate(-12deg);
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		}

		20% {
			transform: rotate(12deg);
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		}

		28% {
			transform: rotate(-10deg);
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		}

		36% {
			transform: rotate(10deg);
			transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
		}

		42% {
			transform: rotate(-8deg);
			transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
		}

		48% {
			transform: rotate(8deg);
			transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
		}

		52% {
			transform: rotate(-4deg);
			transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
		}

		56% {
			transform: rotate(4deg);
			transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
		}

		60% {
			transform: rotate(0deg);
			transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
		}

		100% {
			transform: rotate(0deg);
			transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
		}
	}
</style>